<template>
    <div class="card card-custom card-stretch gutter-b">
      <!--begin::Body-->
      <div class="card-body p-0">
        <div>
            <b-card-group deck>
            <b-card title="用户反馈" header-tag="header" footer-tag="footer">
                <template v-slot:header>
                    <h6 class="mb-0">当前在线人数：{{ onlineCount }}</h6>
                </template>
                <b-card-text>
                    <template v-for="(bar, i) in bars">
                        <div v-bind:key="i" class="row mb-1">                            
                            <div class="col-sm-8 pt-1">
                                <b-progress :value="bar.value" :variant="bar.variant" :key="bar.variant" show-progress animated></b-progress>
                            </div>
                            <div class="col-sm-4">{{ bar.level }}: {{ bar.number }}/人</div>
                        </div>                       
                    </template>                    
                </b-card-text>
                <template v-slot:footer>
                    评分：♥ ♥ ♥ ♥ ♥
                </template>
            </b-card>
            </b-card-group>
            </div>
      </div>
      <!--end::Body-->
    </div>

  </template>
  
  <script>
  import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
  import Swal from "sweetalert2";
  import apiUtil from "@/core/util/apiUtil.js";
  import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
  import { mapGetters } from "vuex";
  
  export default {
    name: "widget-report",
    components: {
    },
    data() {
        return {    
            searchForm: { type: "" },  
            dataList: [],
            browChart: null,
            onlineCount:0,
            totalCount:0,
            bars: [
            { level: '1 ♥',variant: 'success', value: 75 ,number:2},
            { level: '2 ♥',variant: 'info', value: 75 ,number:10 },
            { level: '3 ♥',variant: 'warning', value: 75  ,number:95},
            { level: '4 ♥',variant: 'danger', value: 75  ,number:786},
            { level: '5 ♥',variant: 'primary', value: 75  ,number:1008},
            ],
            timer: null
        };
    },
    mounted() {    
        setTimeout(() => {
            this.initChart();
            this.initData();
            this.getOnlineCount();
        }, 500);
        this.timer = setInterval(() => {
            this.bars.forEach(bar => (bar.value = 25 + Math.random() * 75))
        }, 2000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
        this.timer = null
    },
    methods: {
        initChart() {
            this.browChart = this.$echarts.init(document.getElementById('browChart'));
            this.browChart.setOption({
                title: {
                    text: '',
                    x: 'center'
                },               
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} {b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: []
                },
                series: [
                    {
                        name: '分布情况',
                        type: 'pie',
                        options3d: {
                            enabled: true,//使用3d功能
                            alpha: 60,//延y轴向内的倾斜角度
                            beta: 0,   
                        },
                        size:'180%',
            			innerSize: '90%',
                        radius: '90%',
                        center: ['50%', '50%'],
                        data: [
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        },
        initData() {
            if (null != this.browChart) {
            apiUtil.get(process.env.VUE_APP_LOG_API + "/logLogin/browser/report", this.searchForm).then(({ data }) => {
                    let option = this.browChart.getOption();
                    option.series[0].data = data.data;
                    this.browChart.setOption(option);
                });
            }
        },
        getOnlineCount() {
            apiUtil.get(process.env.VUE_APP_OAUTH_API + "/oauthOnline/count", null).then(({ data }) => {
                this.onlineCount = data.data+"人";
            });
        },
    }
    };
  </script>
  